<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <input type="text">
    <div id="app"></div>
    <script>
        // let sun = {}
        // console.log(sun.name);
        // sun.name = "zs"
        function observe(target) {
            const div = document.getElementById("app")
            /* 
                {
                    title: "Vue",
                    desc: "描述信息"
                }
            */
            let props = Object.keys(target)
            console.log(props);//['title', 'desc']
            let obj = {}
            for (const prop of props) {
                Object.defineProperty(obj, prop, {
                    // Obj.title = target.title
                    get() {
                        return target[prop]
                    },
                    // obj.title = zs
                    // target.title = zs
                    set(value) {
                        target[prop] = value
                        render()
                    }
                })
            }

            // 将数据渲染到浏览器
            function render(){
                let html = ""
                for (const item of props) {
                    html += `<p>${item} ----- ${obj[item]}</p>`
                }

                div.innerHTML = html

            }

            render()

            return obj

        }

        let data = {
            title: "Vue",
            desc: "描述信息"
        }
        let obj1 = observe(data) // obj1 = obj

        document.querySelector('input').onkeyup = function() {
            obj1.title = this.value
        }
    </script>
</body>
</html>